<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%--@elvariable id="albumEntries" type="java.util.List<com.google.gdata.data.photos.AlbumEntry>"--%>
<%--@elvariable id="testEntry" type="java.lang.String"--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="l" tagdir="/WEB-INF/tags" %>
<l:layout>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(".active").each(function(){
                $(this).removeClass("active");
            });
            jQuery("#albums a").addClass("active");
        });
    </script>
    <style type="text/css">
        .albumThumbnailContainer {
            display: inline-block;
            position: relative;
            padding: 10px;
        }

        .albumTitle {
            padding-left: 5px;
            padding-right: 5px; /*border:1px black solid;*/
            width:150px;
        }

        .albumThumbnail {
            padding: 5px;
        }

    </style>

    <c:forEach items="${requestScope.albumEntries}" var="albumEntry">
        <c:forEach items="${albumEntry.mediaThumbnails}" var="thumb">
            <div class="albumThumbnailContainer">
                <a href="#">
                    <div class="albumTitle">
                        <h3>${albumEntry.title.plainText}</h3>
                    </div>
                </a>

                <div class="albumThumbnail">
                    <a href="#">
                        <img src="${thumb.url}" alt="${albumEntry.description.plainText}">
                    </a>
                </div>
            </div>
        </c:forEach>
    </c:forEach>
</l:layout>